 <template>
 <div class="troch" v-cloak>
 <!-- 采集中心 -->
     <div class="cail">
          <transition name="Xslide-fade" >
            <div class="container" v-if="Navigation">
                    <ul class="orid clearfix" style="top:auto;">
                      <li>
                        <img src="../../../static/images/cjzx.png" alt="" /><a>集采中心</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/csfw.png" alt="" /><a>财税服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/flfw.png" alt="" /><a>法律服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/rlzy.png" alt="" /><a>人力资源</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/lj.png" alt="" /><a>供应链服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/zx.png" alt="" /><a>集咨询管理</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/jr.png" alt="" /><a>金融服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/pg.png" alt="" /><a>评估认证</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/dn.png" alt="" /><a>专业技术</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/zh.png" alt="" /><a>综合服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                    </ul>
                  </div>
         </transition>

        <div class="container main">
          <!-- 头部 -->
          <div class="row">
            <div class="col-md-6  design refer_hot">
              <div class="reference">
                <span>热门推荐</span>
              </div>
              <div class="product_banner">
                <div
                  id="carousel-example-generic1"
                  class="carousel slide"
                  data-ride="carousel"
                >
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li
                      data-target="#carousel-example-generic1"
                      data-slide-to="0"
                      class="active"
                    ></li>
                    <li
                      data-target="#carousel-example-generic1"
                      data-slide-to="1"
                    ></li>
                    <li
                      data-target="#carousel-example-generic1"
                      data-slide-to="2"
                    ></li>
                  </ol>
                  <div class="carousel-inner product_banner" role="listbox">
                    <div class="item active">
                      <img src="../../../static/images/cj_bj.png" alt="..." />
                    </div>
                    <div class="item">
                      <img src="../../../static/images/cj_bj.png" alt="..." />
                    </div>
                    <div class="item">
                      <img src="../../../static/images/cj_bj.png" alt="..." />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6  design">
              <div class="product_title">
                <h2>我是商品标题</h2>
                <p class="product_T">
                  我是商品描述我是商品描述我是商品描述我是商品描
                </p>
                <p class="product_price">
                  <span>原价￥<del>4000</del></span
                  ><span>现价￥<b>2000</b></span>
                </p>
                <button class="rush_buy">立即抢购</button>
                <p class="product_time">仅剩下1天6小时28分钟</p>
              </div>
            </div>
          </div>
          <div class="title">||&nbsp;产品展示</div>
          <div>
            <div class="row">
              <div class="col-md-3 nonges" v-for="item in shopdata" @click="GoodsDetails">
                <div class=" hot_BJ show_shop">
                  <p class="shop_img">
                    <img src="../../../static/images/shopping.png" alt="" />
                  </p>
                  <h6 class="shop_title text-overflow">{{ item.title }}</h6>
                  <p class="small_title text-overflow">{{ item.small_title }}</p>
                  <p class="shop_price">
                    <span>￥{{ item.newprice }}</span
                    ><del>￥{{ item.oldprice }}</del
                    ><span
                      >已售<i>{{ item.sold }}</i></span
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

       <!--  -->
     
    </div>
</template>


<script>
import headlogin from '../../views/localPage/headlogin'
  export default{

  data(){
    return{
      cur: 1,//导航栏的默认光标
      Navigation:false,//服务分类的隐藏显示

      marker: true,
      equity: false,
      elation: false,

      navD: [
        { id: 1, zt: "首页" },
        { id: 2, zt: "采集中心" },
        { id: 3, zt: "服务机构" },
        { id: 4, zt: "服务顾问" },
        { id: 5, zt: "关于我们" }
      ],
      touch: [
        {
          title: "总部联系方式",
          address: "厦门市湖里区湖里大道33~35号六层西侧30#厂房",
          email: "361006",
          tel: "592-5703605",
          cz: "592-5703604"
        },
        {
          title: "上海研发中心",
          address: "上海市浦东新区沈海录123弄星月智汇湾9号楼3楼B座房",
          email: "201318",
          tel: "021-68409021",
          cz: "021-68388010"
        }
      ],
      shopdata: [
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      },
      {
        url: "",
        title: "运动健身会员卡",
        small_title: "我是副标题我是副标题",
        newprice: "187",
        oldprice: "187",
        sold: "66"
      }
    ],
      
    }
  },
  methods: {
    // 导航栏
    getItme: function(item, index) {
      this.cur = index;
      switch(index)
      {
                  case 0:
             
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:
           
                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:
              
                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:
                  
                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:
                  
                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
      }
    },
  

    //商品
    GoodsDetails(){
      this.$router.push({path:'/ServiceSupermarket/GoodsDetails'})
    },
      //写需求
        release_demand(){
            this.$router.push({path:'/ServiceSupermarket/CreateDemand'})    
        },
  },
  computed: {},
  components:{headlogin}
  
};

</script>
<style scoped>
.cail .product_title{
  background-image: url(../../../static/images/sp_544.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 368px;
  padding: 40px 90px 40px 40px;
}
.cail .product_title h2{
  height: 39px;
	font-family: "MicrosoftYaHei-Bold";
	font-size: 40px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 7px;
	color: #ffffff;
}
.cail .product_title .rush_buy{
  width: 120px;
  height: 35px;
	background-image: linear-gradient(0deg, 
		#ef8200 0%, 
		#fecb01 100%), 
	linear-gradient(
		#000000, 
		#000000);
	background-blend-mode: normal, 
		normal;
  border-radius: 4px;
  border: none;
  color: white;
}
.cail .product_time{
  margin-top: 24px;
  width: 260px;
  height: 40px;
  line-height: 40px;
  background-color: #3561a4;
  text-align: center;
  color: white;
}
.cail .product_title .product_T{
	font-family: "MicrosoftYaHei";
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 3px;
	color: #ffffff;
}
.cail .product_price span{
  font-family: "MicrosoftYaHei";
	font-size: 21px;
	line-height: 24px;
	letter-spacing: 1px;
	color: #ffffff;
}
.cail .product_price span b{
  font-size: 31px;
}
.cail .product_price span:first-child{
  margin-right: 20px;
}
.cail .design{
  margin-top: 70px;
}
.cail .refer_hot .reference{
  width: 65px;
	height: 77px;
  position: absolute;
  top: 0;
  right: 20px;
  background-image: url(../../../static/images/hot_D.png);
  background-repeat: no-repeat;
  z-index: 1;
  text-align: center;
}
.cail .refer_hot .reference span{
  display: inline-block;
  width: 50px;
	height: 38px;
	font-family: "MicrosoftYaHei-Bold";
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 3px;
	color: #ffffff;
}
.cail .product_banner,.cail .product_banner>div{
  height: 368px;
}
.cail .product_banner img{
  height: 100%;
  width: 100%;
}
.cail .show_shop .shop_img:hover{
  opacity: .1;
}
.cail .nonges{
  margin-bottom: 10px;
}
.cail .nonges:hover{
  cursor: pointer;
}
.cail .show_shop{
  height: 266px;
  padding: 15px;
}
.cail .show_shop .shop_img{
  height: 120px;
}
.cail .show_shop .shop_img img{
  width: 100%;
  height: 100%;
}
.cail .show_shop .shop_title{
  font-family: MicrosoftYaHei-Bold;
	font-size: 20px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: 2px;
	color: #333333;
}
.cail .show_shop .small_title{
  font-family: MicrosoftYaHei;
	font-size: 16px;
	letter-spacing: 1px;
	color: #666666;
}
.cail .show_shop .shop_price{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cail .show_shop .shop_price del{
  font-size: 24px;
	line-height: 32px;
  letter-spacing: 2px;
  color: #666666;
}
.cail .show_shop p{
  margin-bottom: 0px;
}
.cail .show_shop .shop_price span:first-child{
  color: #d80011;
  font-size: 24px;
	line-height: 32px;
  letter-spacing: 2px;
}
.cail .show_shop .shop_price span:last-child i{
  font-style: normal;
  font-size: 16px;
}
.cail .show_shop .shop_price span:last-child{
  font-size: 13px;
	letter-spacing: 1px;
	color: #666666;
}

</style>

 